<template>
  <div class="add-wrap" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <BaseSectionInfo
      :baseInfo="basicForm"
    ></BaseSectionInfo>
    <div class="body">
      <div class="body-left">
        <SectionInfo :sectionObj="sectionObj"></SectionInfo>
      </div>

      <div class="body-right">
        <el-radio-group v-model="tabPosition">
          <el-radio-button label="node"
            >推进节点</el-radio-button
          >
          <el-radio-button label="info"
            >进度信息</el-radio-button
          >
        </el-radio-group>

        <div
          class="project-part"
          v-show="tabPosition === 'node'"
        >
          <div class="project-part-title top">推进节点</div>
          <AdvanceNodeView
            :stageList="stageList"
          ></AdvanceNodeView>
        </div>

        <div
          class="project-part"
          v-show="tabPosition === 'info'"
        >
          <div class="project-part-title top">进度信息</div>
          <ProgressNodeInfo
            :progressList="progressList"
          ></ProgressNodeInfo>
        </div>
      </div>
    </div>
    <div class="line">
      <el-button @click="goList" class="save-btn"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb'
import AdvanceNode from '../components/advanceNode.vue'
import BaseSectionInfo from '../components/baseSectionInfo.vue'
import SectionInfo from '../components/sectionInfo.vue'
import ProgressNodeInfo from '../components/progressNodeInfo.vue'
import AdvanceNodeView from '../components/advanceNodeView.vue'
import {
  querySectionInfo,
  queryConstructionBaseInfo
} from '@/api/dataManagement'

export default {
  props: {
    pkid: String,
    title: String,
    projectId: String,
    isEdit: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Breadcrumb,
    AdvanceNode,
    BaseSectionInfo,
    SectionInfo,
    ProgressNodeInfo,
    AdvanceNodeView
  },
  data() {
    return {
      loading: false,
      stageList: [],
      props: { multiple: true },
      tabPosition: 'node',
      progressList: [],
      sectionObj: {},
      basicForm: {}
    }
  },
  computed: {
    titles() {
      return [this.title]
    }
  },
  watch: {},
  mounted() {
    if (this.pkid) {
      this.getDetailInfo()
      this.getProjectInfo()
    }
  },
  methods: {
    getDetailInfo() {
      this.loading = true
      querySectionInfo(this.pkid).then((res) => {
        if (res.success) {
          this.sectionObj = res.data
          // this.basicForm = res.data.section
          this.stageList = res.data.node
          this.progressList = res.data.process
        }
        this.loading = false
      })
    },

    getProjectInfo() {
      queryConstructionBaseInfo(this.projectId).then(
        (res) => {
          if (res.success) {
            if (res.data) {
              this.basicForm = res.data.baseMess
            }
          }
        }
      )
    },

    goList() {
      this.$router.push(
        '/dataManagement/projectManagement/sectionManagement/list'
      )
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/form.scss';
.add-wrap {
  padding: 0 20px;

  .body {
    display: flex;
    padding: 10px 0 0 10px;

    &-left {
      width: 70%;
      border-right: 1px solid #f1f1f1;
      overflow: auto;

      .field-block {
        margin-bottom: 16px;
      }

      .field-block label {
        display: inline-block;
        width: 60px;
        font-weight: bold;
      }

      .image-wrapper {
        display: flex;
        flex-wrap: wrap;
      }
    }

    &-right {
      flex: 1;
      padding-left: 10px;
      overflow-y: auto;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-right: 10px;
    }
  }

  .line {
    display: flex;
    justify-content: center;
  }

  .top {
    margin-top: 20px;
  }
}
</style>
